<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <caption>个体信息</caption>
        <tr>
            <td>照片:</td>
            <td><img src="head.jpg"  width="50" alt=""></td>
        </tr>
        <tr>
            <td>名字</td>
            <td id="name_td">xxx</td>
        </tr>
        <tr>
            <td>年龄</td>
            <td id="age_td">xxx</td>
        </tr>
        <tr>
            <td>好友</td>
            <td><ul></ul></td>
        </tr>
    </table>
    <input type="button" value="提交数据" onclick="f()">

    <script>
        function f() {
            //模拟从服务器请求的数据
            let p={name:"苍老师",age:50,url:"a.jpg",friend:["kj","cq","ch"]};
            //把对象中的数据展示到页面中
            let img= document.querySelector("img");
            let name_td=document.querySelector("#name_td");
            let age_td=document.querySelector("#age_td");
            let ul=document.querySelector("ul")
            img.src=p.url;
            name_td.innerText=p.name;
            age_td.innerText=p.age
            //显示好友
            for (let name of p.friend) {
                let li=document.createElement("li");
                li.innerText=name;
                ul.append(li);
            }



        }
    </script>
</body>
</html>